<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<script>
    function getSelectInfo(myselect, mydiv) {
        var s = document.getElementById(myselect);
        var selectLength = s.length;
        var optionCollectionLength = s.options.length;
        var selectedInd = s.selectedIndex;
        var opt = s.options[selectedInd];
        var optText = "";
        
        if (opt) {
            optText = opt.innerHTML;
        }
        
        document.getElementById(mydiv).innerHTML = "Select length: " + selectLength + "<br>Option collection length: " + optionCollectionLength + "<br>Selected index: " + selectedInd + "<br>Selected option: " + optText;
    }
    
    function getAllInfo(x) {
        for (var i = 1; i < x; i++) {
            var s = "s" + i;
            var d = "d" + i;
            
            getSelectInfo(s, d);
        }
    }
</script>


</head>
<body onload="getAllInfo(12)">
<p><b>BUG ID:</b> <a href="rdar://problem/4229189">4229189</a> add a way to get a separator into a select element</p>

<p id="test" style="background-color:skyblue; padding:3px;"><b>STEPS TO TEST:</b> 
Please describe the steps required to test this bug here.
</p>


These tests make sure that adding an hr element in a select works properly.

<p id="success" style="background-color:palegreen; padding:3px;"><b>TEST PASS:</b>This should be a disabled popup menu, since the hr is not selectable. 
</p>
<p id="failure" style="background-color:#FF3300; padding:3px;"><b>TEST FAIL:</b> </p>
<select id = "s1">
<hr>
</select>
<div id="d1"></div>

<p id="success" style="background-color:palegreen; padding:3px;"><b>TEST PASS:</b> 
You should see a popup menu with the following items: separator, option, separator
</p>
<p id="failure" style="background-color:#FF3300; padding:3px;"><b>TEST FAIL:</b>  
</p>
<select id = "s2">
<hr>
<option>opt 1</option>
<hr>
</select>
<div id="d2"></div>

<p id="success" style="background-color:palegreen; padding:3px;"><b>TEST PASS:</b> 
You should see a popup menu with the following items: option, separator, option
</p>
<p id="failure" style="background-color:#FF3300; padding:3px;"><b>TEST FAIL:</b>  
</p>
<select id = "s3">
<option>opt 1</option>
<hr>
<option>opt 2</option>
</select>
<div id="d3"></div>

<p id="success" style="background-color:palegreen; padding:3px;"><b>TEST PASS:</b> 
You should see a popup menu with the following items: option, four separators, two options, separator, option.
</p>
<p id="failure" style="background-color:#FF3300; padding:3px;"><b>TEST FAIL:</b>  
</p>
<select id = "s4">
<option>opt 1</option>
<hr>
<hr>
<hr>
<hr>
<option>opt 2</option>
<option>opt 3</option>
<hr>
<option>opt 4</option>
</select>
<div id="d4"></div>

<p id="success" style="background-color:palegreen; padding:3px;"><b>TEST PASS:</b> 
You should see a popup menu with the following items: group label, option, separator (incl. in group).
</p>
<p id="failure" style="background-color:#FF3300; padding:3px;"><b>TEST FAIL:</b>  
</p>
<select id = "s5">
<optgroup label="Group 1">
<option>opt 1</option>
<hr>
</optgroup>
</select>
<div id="d5"></div>

<p id="success" style="background-color:palegreen; padding:3px;"><b>TEST PASS:</b> 
You should see a popup menu with the following items: separator, group label, option.
</p>
<p id="failure" style="background-color:#FF3300; padding:3px;"><b>TEST FAIL:</b>  
</p>
<select id = "s6">
<hr>
<optgroup label="Group 1">
<option>opt 1</option>
</optgroup>
</select>
<div id="d6"></div>

<p id="success" style="background-color:palegreen; padding:3px;"><b>TEST PASS:</b> 
You should see a popup menu with the following items: group label, option, separator, option, separator, option, two separators, (end of group), one option.
</p>
<p id="failure" style="background-color:#FF3300; padding:3px;"><b>TEST FAIL:</b>  
</p>
<select id = "s7">
<optgroup label="Group 1">
<option>opt 1</option>
<hr>
<option>opt 2</option>
<hr>
<option>opt 3</option>
<hr>
<hr>
</optgroup>
<option>opt 4</option>
</select>
<div id="d7"></div>

<p id="success" style="background-color:palegreen; padding:3px;"><b>TEST PASS:</b> 
You should see a popup menu with the following items: group label, one option two separators, (end of group), separator, group label, separator, two options, separator, (end of group), option.
</p>

<p id="failure" style="background-color:#FF3300; padding:3px;"><b>TEST FAIL:</b>  
</p>
<select id = "s8">
<optgroup label="Group 1">
<option>opt 1</option>
<hr>
<hr>
</optgroup>
<hr>
<optgroup label="Group 2">
<hr>
<option>opt 2</option>
<option>opt 3</option>
<hr>
</optgroup>
<option>opt 4</option>
</select>
<div id="d8"></div>

<p id="success" style="background-color:palegreen; padding:3px;"><b>TEST PASS:</b> 
A disabled popup menu - since the optgroup and the hr are not selectable.
</p>
<p id="failure" style="background-color:#FF3300; padding:3px;"><b>TEST FAIL:</b>  
</p>
<select id = "s9">
<optgroup label="Group 1">
<hr>
</optgroup>
</select>
<div id="d9"></div>

<p id="success" style="background-color:palegreen; padding:3px;"><b>TEST PASS:</b> 
You should see a list box with the following items: 4 options.
</p>
<p id="failure" style="background-color:#FF3300; padding:3px;"><b>TEST FAIL:</b>  
You should not see any separators in the list box.</p>
<br><select id = "s10" multiple>
<option value="test">opt 1</option>
<hr>
<hr>
<hr>
<hr>
<option>opt 2</option>
<option>opt 3</option>
<hr>
<option>opt 4</option>
</select>
<div id="d10"></div>

<p id="success" style="background-color:palegreen; padding:3px;"><b>TEST PASS:</b> 
You should see a list box with the following items: one option, group label, 3 options.
</p>
<p id="failure" style="background-color:#FF3300; padding:3px;"><b>TEST FAIL:</b>  
You should not see any separators in the list box.</p>
<select id = "s11" multiple>
<option value="test">opt 1</option>
<hr>
<hr>
<optgroup label="Group 1">
<hr>
<hr>
<option>opt 2</option>
<option>opt 3</option>
<hr>
<option>opt 4</option>
</optgroup>
</select>
<div id="d11"></div>

<p id="success" style="background-color:palegreen; padding:3px;"><b>TEST PASS:</b> 
For each of these list boxes, when you change the selection in JavaScript to index 1, the second option should get highlighted</p>
<p id="failure" style="background-color:#FF3300; padding:3px;"><b>TEST FAIL:</b>  
"opt 2" does not get highlighted after clicking the button.</p>

<select id="s12" multiple>
<option id="o3">opt 1</option>
<hr>
<option id="o4">opt 2</option>
</select>
<input type="button" value="Change selection to 'opt 2'" onclick="document.getElementById('s12').selectedIndex = 1;"></input>

<br><select id="s13" multiple>
<option id="o5">opt 1</option>
<hr>
<optgroup label="group">
<option id="o6">opt 2</option>
</optgroup>
</select>
<input type="button" value="Change selection to 'opt 2'" onclick="document.getElementById('s13').selectedIndex = 1;"></input>

<body>
</html>

